@extends("layout/admin")
@section("css")
    <link href="/admins/css/plugins/dataTables/datatables.min.css" rel="stylesheet">
@endsection
@section("content")
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>Data Tables</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a>Tables</a>
                </li>
                <li class="active">
                    <strong>Data Tables</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Basic Data Tables example with responsive plugin</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_data_tables.html#">Config option 1</a>
                                </li>
                                <li><a href="table_data_tables.html#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover dataTables-example" >
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>分类</th>
                                    <th>图片</th>
                                    <th>标题</th>
                                    <th>作者</th>
                                    <th>浏览量</th>
                                    <th>点赞量</th>
                                    <th>发表时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @foreach($adviceInfo as $k => $v)
                                        <tr class="gradeX">
                                            <td>{{$v->type}}</td>
                                            <td>@if($v->type == 0) 淘宝资讯 @elseif($v->type == 1) 就问语录 @else 课件下载 @endif</td>
                                            <td><img width="100" src="{{$v->imgurl}}" /></td>
                                            <td>{{$v['title']}}</td>
                                            <td>{{$v['author']}}</td>
                                            <td>{{$v['look_num']}}</td>
                                            <td>{{$v['like_num']}}</td>
                                            <td>{{$v['created_at']}}</td>
                                            <td>
                                                <a href="/admin/advice-update/{{$v->id}}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 修改 </a><br /><br />
                                                <a href="javascript:void(0);" class="btn btn-white btn-sm delete" data="{{$v->id}}" onclick="deleteAdvice($(this))"><i class="fa fa-trash-o"></i> 删除 </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th></th>
                                    <th>分类</th>
                                    <th>图片</th>
                                    <th>标题</th>
                                    <th>作者</th>
                                    <th>浏览量</th>
                                    <th>点赞量</th>
                                    <th>发表时间</th>
                                    <th>操作</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("js")
    <script src="/admins/js/plugins/dataTables/datatables.min.js"></script>
    <script src="/admins/js/plugins/jeditable/jquery.jeditable.js"></script>
    <script>
        $(document).ready(function(){
            $('.dataTables-example').DataTable({
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    { extend: 'copy'},
                    {extend: 'csv'},
                    {extend: 'excel', title: 'ExampleFile'},
                    {extend: 'pdf', title: 'ExampleFile'},

                    {extend: 'print',
                        customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                        }
                    }
                ]

            });
            /* Init DataTables */
            var oTable = $('#editable').DataTable();
            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable( '../example_ajax.php', {
                "callback": function( sValue, y ) {
                    var aPos = oTable.fnGetPosition( this );
                    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                },
                "submitdata": function ( value, settings ) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition( this )[2]
                    };
                },

                "width": "90%",
                "height": "100%"
            } );


        });

        function fnClickAddRow() {
            $('#editable').dataTable().fnAddData( [
                "Custom row",
                "New row",
                "New row",
                "New row",
                "New row" ] );

        }

        function deleteAdvice(obj){
            that = obj;
            swal({
                title: "危险操作，确定删除?",
                text: "删除后将无法恢复！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定!",
                closeOnConfirm: false
            }, function () {
                var advice_id = that.attr("data");
                $.get("/admin/advice-delete",{"advice_id":advice_id},function(data){
                    if(data == 1){
                        that.parents("tr").remove();
                        swal("删除!", "删除商品成功", "success");
                    }else{
                        swal("删除!", "删除商品出错", "error");
                    }
                });
            });
        };
    </script>
@endsection